<template>
  <div>
    <a-descriptions>
      <a-descriptions-item label="卡号">
        {{ customerInfo.details.jnbyCardNo }}
      </a-descriptions-item>
      <a-descriptions-item label="等级">
        {{ customerInfo.details.viptypeName }}
      </a-descriptions-item>
      <a-descriptions-item label="积分">
        {{ customerInfo.integer }}
      </a-descriptions-item>
      <a-descriptions-item label="入会日期">
        {{ time }}
      </a-descriptions-item>
      <a-descriptions-item label="归属导购">{{ customerInfo.fashionerName }}</a-descriptions-item>
      <a-descriptions-item label="订阅状态"> {{ customerInfo.subStatus | subStatus }}</a-descriptions-item>
      <a-descriptions-item label="BOX金币">
        {{ customerInfo.details.coin }}
      </a-descriptions-item>
      <a-descriptions-item label="累计购买金额">
        {{ customerInfo.boxTotConsume }}
      </a-descriptions-item>
      <a-descriptions-item label="剩余服务次数">
        {{ customerInfo.rightsNum }}
      </a-descriptions-item>
      <a-descriptions-item label="订阅发盒计划">{{ subMonth }}</a-descriptions-item>
    </a-descriptions>
    <a-divider dashed />
    <h3 style="margin-bottom:24px;">会员卡</h3>
    <a-table ref="table" size="default" :rowKey="record => record.id" :columns="columns2" :data-source="cardInfos" :pagination="false"></a-table>
    <a-divider dashed />
    <h3 style="margin-bottom:24px;">订阅记录</h3>
    <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps">
      <span slot="createTime" slot-scope="text">{{ text | utc2beijing }}</span>
      <span slot="seTime" slot-scope="text, record">{{ record.startTime | utc2beijing }} ~ {{ record.endTime | utc2beijing }}</span>
    </s-table>
  </div>
</template>
<script>
import Vue from 'vue'
import { STable } from '../../../components'
import { selectById } from '@/api/box/api'
import { subHistory } from '@/api/box/member'
const columns = [
  {
    title: '购买时间',
    dataIndex: 'createTime',
    align: 'center',
    width: '35%',
    scopedSlots: { customRender: 'createTime' }
  },
  {
    title: '会员有效期',
    dataIndex: 'seTime',
    align: 'center',
    width: '35%',
    scopedSlots: { customRender: 'seTime' }
  },
  {
    title: '服务次数',
    dataIndex: 'totalNum',
    align: 'center',
    width: '30%'
  }
]
const columns2 = [
  {
    title: '开卡时间',
    dataIndex: 'createDate',
    align: 'center'
  },
  {
    title: '会员卡品牌',
    dataIndex: 'brandName',
    align: 'center'
  },
  {
    title: '卡等级',
    dataIndex: 'vipTypeName',
    align: 'center'
  },
  {
    title: '积分',
    dataIndex: 'cardIntegral',
    align: 'center'
  },
  {
    title: '是否经销',
    dataIndex: 'customerId',
    align: 'center',
    customRender: text => (text == 176 ? '直营' : '经销')
  },
  {
    title: '开卡门店',
    dataIndex: 'storeName',
    align: 'center'
  },
  {
    title: '绑定导购',
    dataIndex: 'salesRepName',
    align: 'center'
  }
]
export default {
  components: {
    STable
  },
  data() {
    this.columns = columns
    this.columns2 = columns2
    return {
      unionId: '',
      id: '',
      customerInfo: {
        details: {}
      },
      subMonth: '',
      time: '',
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      loadData: parameter => this.fetchData(parameter),
      cardInfos: []
    }
  },
  computed: {
    // createTime() {
    //   totBuyAmount v => {
    //     console.log(v)
    //   }
    // }
  },
  filters: {
    subStatus(v) {
      if (v == 2) {
        return '订阅结束'
      } else if (v == 1) {
        return '订阅中'
      } else if (v == 0) {
        return '未订阅'
      }
    }
  },
  created() {
    this.unionId = this.$route.params.id
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  },
  methods: {
    // 获取用户信息
    fetchUserInfo() {
      return selectById(this.unionId, '').then(res => {
        if (res.code == 0) {
          return res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // loadData
    async fetchData(parameter) {
      try {
        let data = await this.fetchUserInfo()
        this.customerInfo = data
        this.cardInfos = data.cardInfos
        if (this.customerInfo.subMonth && this.customerInfo.subMonth.length > 0) {
          this.subMonth = this.customerInfo.subMonth.join('、')
        } else {
          this.subMonth = ''
        }

        var utc = Vue.filter('utc2beijing')
        this.time = utc(this.customerInfo.details.createTime)
        this.id = data.details.id
        let params = {
          requestData: {
            id: this.id
          },
          page: parameter
        }
        return subHistory(params).then(res => {
          if (res.code == 0) {
            return res
          } else {
            this.$message.warning(res.msg)
            const data = {
              page: {
                pageNo: 0,
                count: 0,
                pageSize: 10
              },
              data: []
            }
            return data
          }
        })
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

